<template>
  <div class="quickbooks-item-config item-config">
    <el-row>
        <el-form :model="qbConfigForm"
                 label-position="top"
                 label-width="100px"
                 ref="quick-books-form"
                 :rules="qbConfigRules">
          <el-form-item :label="$t('custom.connector.qbPassword')"
                        prop="pass">
            <el-input v-model="qbConfigForm.pass"
                      :readonly="true"
                      :type="passwordCheck?'text':'password'">
              <i slot="suffix"
                 :class="passwordCheck?'cuifont icon_eye_show':'cuifont icon_eye_hide'"
                 @click="passwordCheck=!passwordCheck"></i>
            </el-input>&nbsp;&nbsp;
            <el-link :underline="false">
              <i class="el-icon-document-copy"
                 @click="copyPass(qbConfigForm.pass)"></i>
            </el-link>
          </el-form-item>
          <el-form-item :label="$t('custom.connector.qbPath')"
                        prop="path">
            <el-input v-model="qbConfigForm.path"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       :loading="testLoading"
                       style="width:180px;margin-top: 6px;"
                       size="small"
                       @click="startTestConfig">{{ $t('custom.connector.savequickbookspath') }}</el-button>
          </el-form-item>

        </el-form>
        <div class="downloadBtn_box">
          <i class="cuifont icon_arrow_download"></i>
          <el-dropdown trigger="hover">
            <span>Download</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="box-shadow: 0px 1px 0px 0px #F0F0F0;">
                <el-link class="downloadBtn_box_dropdown" style="width:100%;height:100%;padding:0 20px"
                         :underline="false"
                         type="primary"
                         target="_blank"
                         href="https://developer.intuit.com/app/developer/qbdesktop/docs/get-started/get-started-with-quickbooks-web-connector#download-and-install-the-quickbooks-web-connector">{{$t('custom.connector.qbhowtoinstall')}}</el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link class="downloadBtn_box_dropdown" style="width:100%;height:100%;padding:0 20px"
                         :underline="false"
                         type="primary"
                         target="_blank"
                         href="https://static.developer.intuit.com/resources/quickbooksWebconnector/QBWebConnector2_3R0_00215.zip">{{$t('custom.connector.downloadurlInstaller')}}</el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link class="downloadBtn_box_dropdown" style="width:100%;height:100%;padding:0 20px"
                         :underline="false"
                         type="primary"
                         :href="$ossLink+'/files/APP_QBFS.qwc'"
                         target="_blank">{{$t('custom.connector.downloadurlFile')}}</el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
    </el-row>
  </div>
</template>

<script>
import { Component } from './modules/Component.js'
import Trail from '@/components/storybook/mixins/trail'

export default {
  mixins: [Trail],

  props: {
    qbConfigForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      passwordCheck: false,
      qbConfigRules: {
        pass: [
          {
            required: true,
            message: this.$t('custom.connector.interDownloadurl'),
            trigger: 'blur'
          }
        ],
        path: [
          {
            required: true,
            message: this.$t('custom.connector.interquickbookspath'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ]
      },
      testLoading: false
    }
  },
  created () {
  },
  methods: {
    cancelThisConfig () {
      this.qbConfigForm = {
        downloadurl: '',
        pass: '',
        path: ''
      }
    },
    startTestConfig () {
      this.validateConfigForm().then(() => {
        this.testLoading = true
        const params = {
          ...this.qbConfigForm,
          path: this.pathUrlEncode(this.qbConfigForm.path),
          tenantId: this.$store.state.user.tenantCode,
          subjectCode: 'QUICKBOOKS'
        }
        this.$interface.taskManager
          .postClientData(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.testLoading = false
              Component.$emit('getConnectorConfig')
              return this.$message.error(res.msg)
            }
            this.testLoading = false
            this.synctdData()
            return this.$message.success(res.msg)
          }).catch(() => {
            this.testLoading = false
          })
      })
    },
    pathUrlEncode (code) {
      if (code) {
        code = window.encodeURIComponent(code)
        return code
      }
      return code
    },
    validateConfigForm () {
      return this.$refs['quick-books-form'].validate()
    },
    synctdData (itemInfo) {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'QUICKBOOKS'
      }
      this.$interface.taskManager.syncClientData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        if (itemInfo && res.data && res.data.sync) {
          itemInfo.sync.lastTime = res.data.sync.lastTime
          itemInfo.sync.status = res.data.sync.status
        }
        Component.$emit('getConnectorConfig')
        return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    copyPass (val) {
      const url = val
      const oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()

      this.$message.success('Copied')
    }
  }
}
</script>

<style lang="scss">
.quickbooks-item-config {
  width: 100%;
    .downloadBtn_box:hover {
      background: #e6f7ff;
      border-radius: 4px;
      color: #138dc7;
    }
    .downloadBtn_box:hover .el-dropdown > span {
      color: #138dc7;
    }
    .downloadBtn_box {
      position: absolute;
      right: 20px;
      top: 0;
    }
}
.downloadBtn_box_dropdown {
  color: #404040 !important;
  span {
    font-size: 14px;
    font-weight: 400;
    color: #404040;
  }
}
</style>
<style scoped>
::v-deep li.el-dropdown-menu__item {
   padding: 0!important;
   width: 190px;
}
::v-deep .el-link{
  justify-content: flex-start;
}
</style>
